<template>
  <div>
    <Banner :arr="banner1Arr" />
    <div class="grid-content">
      <mp-grid :gridData="gridData"></mp-grid>
    </div>

    <div class="title">
      <span>新品上市</span>
    </div>
    <Banner :arr="banner2Arr" />
    <img class="bannerImg" src="/static/images/home/04banner.jpg" alt="">

    <div class="mybox">
      <img class="bannerImg" src="/static/images/home/04left.jpg" alt="">
      <img class="bannerImg" src="/static/images/home/04right.jpg" alt="">
    </div>

    <MyProduct :list="list" />
    <MyBtns />
  </div>
</template>

<script>
import MyProduct from "@/components/MyProduct"
import MyBtns from "@/components/MyBtns"
import Banner from "@/components/Banner"
import mpGrid from 'mpvue-weui/src/grid';
export default {
  data () {
    return {
      banner1Arr: [
        "/static/images/home/01banner1.jpg",
        "/static/images/home/01banner2.jpg"
      ],
      banner2Arr: [
        "/static/images/home/03banner1.jpg",
        "/static/images/home/03banner2.jpg"
      ],
      gridData: [
        { src: '/static/images/home/02remai.png', name: '热卖', url: '' },
        { src: '/static/images/home/02beixin.png', name: '被芯', url: '' },
        { src: '/static/images/home/02zhentou.png', name: '枕头', url: '' },
        { src: '/static/images/home/02taojian.png', name: '套件', url: '' }
      ],
      list: [
        {
          title: "热销产品",
          arr: [
            {src: "/static/images/home/05-1.jpg", txt: ""},
            {src: "/static/images/home/05-2.jpg", txt: ""},
            {src: "/static/images/home/05-3.jpg", txt: ""},
            {src: "/static/images/home/05-4.jpg", txt: ""}
          ]
        }
      ]
    }
  },

  components: {
    mpGrid,
    Banner,
    MyProduct,
    MyBtns
  },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style lang="less" scoped>
  .grid-content {
    background: #fff;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }

  .mybox {
    background: #fff;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    img {
      width: 48%;
    }
  }

  .bannerImg {
    width: 100vw;
    margin: 20rpx 0;
    display: block;
    height: calc(380/750 * 100vw);
  }

  .title {
    height: 100rpx;
    background: #fff;
    position: relative;
    &::before {
      content: "";
      width: 40%;
      height: 4rpx;
      background: #666;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
    span {
      width: 30%;
      height: 100rpx;
      line-height: 100rpx;
      background: #fff;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
  }

</style>
